import { Component } from '@angular/core';
import { MessageService } from '@shared/services/message.service';
import { SocketService } from '@shared/services/scoket.service';


interface ItemList {
  name: string;
  type: string;
  imgUrl?: string;
  isClose?: Boolean;
  children?: ItemList[];
}

@Component({
  selector: 'app-bottom-container',
  templateUrl: './bottom-container.component.html',
  styleUrl: './bottom-container.component.css',
})
export class BottomContainerComponent {
  private isScreen = false;

  constructor(private messageService: MessageService,
    private socketService: SocketService,) {
    this.socketService.on('toggle', res => {
      switch (res.id) {
        case 0: this.toggle('home'); break;
        case 11: this.toggle('danmu'); break;
        case 12: this.toggle('qrcode'); break;
        case 13: this.toggle('music'); break;
        case 100: this.toggle('sign', 'sign_3d'); break;
        case 101: this.toggle('sign', 'sign_book'); break;
      }
    })
  }

  menuList: ItemList[] = [
    {
      name: '签到',
      type: 'sign',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/签到.png',
      children: [
        { name: '3D签到', type: 'sign_3d', isClose: false, },
        { name: '签到簿', type: 'sign_book', isClose: false, },
        { name: '手写签到', type: 'sign_text', isClose: false, },
      ]
    },
    {
      name: '幸运夺宝',
      type: 'treasure',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/幸运夺宝.png',
      children: [
        { name: '转一转', type: 'treasure_turn', isClose: false, },
        { name: '扭一扭', type: 'treasure_twist', isClose: false, },
        { name: '幸运小转盘', type: 'treasure_lucky', isClose: false, },
      ]
    },
    {
      name: '红包雨',
      type: 'packet',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/红包雨.png',
      children: [
        { name: '摇红包', type: 'packet_shake', isClose: false, },
        { name: '全民红包雨', type: 'packet_rain', isClose: false, },
        { name: '点红包', type: 'packet_red', isClose: false, },
      ]
    },
    {
      name: '摇一摇',
      type: 'shake',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/摇一摇.png',
      children: [
        { name: '猴子爬树', type: 'shake_monkey', isClose: false, },
        { name: '追新娘', type: 'shake_bride', isClose: false, },
        { name: '赛龙舟', type: 'shake_boat', isClose: false, },
      ]
    },
    {
      name: '划一划',
      type: 'draw',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/划一划.png',
      children: [
        { name: '数钞票', type: 'draw_cash', isClose: false, },
      ]
    },
    {
      name: '抽奖',
      type: 'prize',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/抽奖.png',
      children: [
        { name: '地球抽奖', type: 'prize_earth', isClose: false, },
        { name: '3D抽奖', type: 'prize_3d', isClose: false, },
      ]
    },
    {
      name: '祝福榜',
      type: 'bless',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/祝福榜.png',
      children: [
        { name: '全屏祝福榜', type: 'bless_full', isClose: false, },
      ]
    },
    {
      name: '弹幕',
      type: 'danmu',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/弹幕.png',
      children: [
      ]
    },
    {
      name: '全屏',
      type: 'screen',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/小屏.png',
      children: [
      ]
    },
    {
      name: '二维码',
      type: 'qrcode',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/二维码.png',
      children: [
      ]
    },
    {
      name: '音乐',
      type: 'music',
      isClose: true,
      imgUrl: '../../../../assets/imgs/bottom/音乐.png',
      children: [
      ]
    },
    {
      name: '更换背景',
      type: 'background',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/更换背景.png',
      children: [
      ]
    },
    {
      name: '播放视频',
      type: 'video',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/播放视频.png',
      children: [
      ]
    },
    {
      name: '首页',
      type: 'home',
      isClose: false,
      imgUrl: '../../../../assets/imgs/bottom/首页.png',
      children: [
      ]
    },
  ];

  toggle(type: string, ctype?: string) {
    let item = this.menuList.find(v => v.type === type) || <ItemList>{};

    if (ctype && item.children?.length) {
      item = item.children.find(v => v.type === ctype) || <ItemList>{};
    }

    if (!item.type) return;

    if (type === 'screen') {
      this.toggleScreen(item);
    }

    this.toggleItem(item)
  }

  toggleScreen(item: ItemList) {
    if (!document.fullscreenElement) {
      if (this.isScreen) {
        document.documentElement.requestFullscreen();
      }
      item.imgUrl = item.imgUrl!.replace('全屏', '小屏');
    } else {
      if (this.isScreen) {
        document.exitFullscreen();
      }
      item.imgUrl = item.imgUrl!.replace('小屏', '全屏')
    }
  }

  onFullscreenchange(bool = false) {
    this.isScreen = bool;
    this.toggle('screen');
  }

  toggleItem(item: ItemList) {
    let type = item.type;

    if (type === 'screen') {
      this.onFullscreenchange(true)
      return;
    }

    item.isClose = !item.isClose;

    this.messageService.Send('bottom-container', {
      type: item.type,
      isClose: item.isClose
    })
  }

  closeQrcode() {
    const item = this.menuList.find(v => v.type === 'qrcode') || <ItemList>{};
    item.isClose = true;
  }
}
